/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
<template>
  <div class="mod-home">
    <h3>网络信息</h3>
    <ul>
      <li>浏览器：{{ browser }}</li>
      <li>本地IP：{{ ip }}</li>
      <li>外网IP：{{ wanIp }}</li>
    </ul>
    <h3>服务器信息</h3>
    <ul>
      <li>
        <div id="cpuChart"></div>
      </li>
      <li>系统版本：{{ osVersion }}</li>
      <li>运行时间：{{ runTime }}</li>
    </ul>
  </div>
</template>
<script>
import { GetNetInfoApi, GetComputerInfoApi } from "@/api/system";
export default {
  name: "systemInfo",
  props: {},
  data() {
    return {
      timer: null,
      browser: "",
      ip: "",
      wanIp: "",
      cpuRate: "0",
      osVersion: "",
      runTime: "",
      cpuChart: null,
      option: {},
      cpuList: [],
      index: 0
    };
  },
  methods: {
    startConnection() {
      this.signalr
        .start()
        .then(() => {})
        .finally(() => {
          this.signalr.invoke("JoinGroup", "admin");
        });
      this.signalr.on("ReceiveMessage", runinfo => {
        this.cpuRate = runinfo.cpuRate;
        this.runTime = runinfo.runTime;
        if (this.cpuList.length >= 60) {
          this.cpuList.splice(0, 1);
        }
        this.cpuList.push(this.cpuRate);
        // for (let i = 0; i < this.cpuList.length; i++) {
        //   this.cpuList[i].index = i;
        // }
        this.option.title = {
          text: "CPU使用率：" + this.cpuRate + "%"
        };
        this.option.series[0].data = this.cpuList;
        // this.option.series[0].data = [
        //   {
        //     name: "使用" + res.data.data.cpuRate + "%",
        //     value: res.data.data.cpuRate,
        //   },
        //   {
        //     name: "未使用" + (100 - res.data.data.cpuRate) + "%",
        //     value: 100 - res.data.data.cpuRate,
        //   },
        // ];
        // 绘制图表
        if (this.option && typeof this.option === "object") {
          this.cpuChart.setOption(this.option);
        }
      });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.cpuChart = this.$echarts.init(document.getElementById("cpuChart"));
      this.option = {
        title: {
          text: "CPU使用率：" + this.cpuRate + "%"
        },
        tooltip: { formatter: "CPU使用率：{c}%" },
        grid: {
          //调整图表上下左右位置
          top: 40,
          left: 20,
          right: 20,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          splitNumber: 5,
          data: [
            0,
            1,
            2,
            3,
            4,
            5,
            6,
            7,
            8,
            9,
            10,
            11,
            12,
            13,
            14,
            15,
            16,
            17,
            18,
            19,
            20,
            21,
            22,
            23,
            24,
            25,
            26,
            27,
            28,
            29,
            30,
            31,
            32,
            33,
            34,
            35,
            36,
            37,
            38,
            39,
            40,
            41,
            42,
            43,
            44,
            45,
            46,
            47,
            48,
            49,
            50,
            51,
            52,
            53,
            54,
            55,
            56,
            57,
            58,
            59,
            60
          ],
          axisLabel: {
            formatter: "{value}s",
            interval: 19
          },
          axisTick: {
            interval: 1
          }
        },
        yAxis: {
          max: 100,
          min: 0,
          type: "value",
          axisLabel: {
            formatter: "{value}%"
          }
        },
        series: [
          {
            type: "line",
            showSymbol: false,
            symbol: "circle", //折线点的图形
            symbolSize: 10, //图形大小
            itemStyle: {
              //图形点和折线的颜色， 可以是单一的，也可以是渐变的
              // color:"#f00"  //单一
              color: {
                //渐变  属性值 同CSS
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "red" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "blue" // 100% 处的颜色
                  }
                ]
              }
            },
            lineStyle: {
              //单独配置折线图线条的显示效果， 配置基本和 itemStyle差不多
              color: "#f0f", //颜色
              width: 5 //线宽
            },
            areaStyle: {
              //折线下面区域块的样式
              color: "#fff"
            },
            data: this.cpuList
          }
        ]
      };
      // 绘制图表
      if (this.option && typeof this.option === "object") {
        this.cpuChart.setOption(this.option);
      }
    },
    getSystemInfo() {
      GetNetInfoApi()
        .then(res => {
          this.browser = res.data.data.browser;
          this.ip = res.data.data.ip;
          this.wanIp = res.data.data.wanIp;
        })
        .catch(err => {
          window.console.log(err);
        });
      // GetComputerInfoApi()
      //   .then((res) => {
      //     this.cpuRate = res.data.data.cpuRate
      //     this.osVersion = res.data.data.osVersion
      //     this.runTime = res.data.data.runTime
      //   })
      //   .catch((err) => {
      //     window.console.log(err)
      //   })
    },
    getRunTime() {
      GetComputerInfoApi()
        .then(res => {
          this.cpuRate = res.data.data.cpuRate;
          this.osVersion = res.data.data.osVersion;
          this.runTime = res.data.data.runTime;
          if (this.cpuList.length >= 60) {
            this.cpuList.splice(0, 1);
          }
          this.cpuList.push(this.cpuRate);
          // for (let i = 0; i < this.cpuList.length; i++) {
          //   this.cpuList[i].index = i;
          // }
          this.option.title = {
            text: "CPU使用率：" + this.cpuRate + "%"
          };
          this.option.series[0].data = this.cpuList;
          // this.option.series[0].data = [
          //   {
          //     name: "使用" + res.data.data.cpuRate + "%",
          //     value: res.data.data.cpuRate,
          //   },
          //   {
          //     name: "未使用" + (100 - res.data.data.cpuRate) + "%",
          //     value: 100 - res.data.data.cpuRate,
          //   },
          // ];
          // 绘制图表
          if (this.option && typeof this.option === "object") {
            this.cpuChart.setOption(this.option);
          }
        })
        .catch(err => {
          window.console.log(err);
        });
    }
  },
  // 初始化之前
  beforeCreate() {},
  // 初始化之后
  created() {
    this.startConnection();
  },
  // 编译挂载之前
  beforeMount() {},
  // 编译挂载之后
  mounted() {
    // window.clearInterval(this.timer);
    this.getSystemInfo();
    this.drawLine();
    this.getRunTime();
    // this.timer = window.setInterval(() => {
    //   setTimeout(() => {
    //     this.getRunTime();
    //   }, 0);
    // }, 10000);
  },
  // 组件更新之前
  beforeUpdate() {},
  // 组件更新之后
  updated() {},
  // 组件销毁之前
  beforeDestroy() {},
  // 组件销毁之后
  destroyed() {
    // window.clearInterval(this.timer);
    this.signalr.invoke("LeaveGroup", "admin");
  },
  components: {}
};
</script>
<style lang="scss">
 .mod-home {
  line-height: 1.5;
}
#cpuChart {
  background-color: #f3f3f3 !important;
  border-radius: 20px;
  width: 100% ;
  height: 300px;
}
</style>
